<template>
  <div id="home">
    <div class="home-main">
      <div class="left">
        <div class="title">
          <HomeTitle title="个人信息" Eng="Person Information"></HomeTitle>
        </div>
        <template v-if="mode == 'view'">
          <div class="viewBox">
            <div class="item">
              <div class="label">姓 名</div>
              <div class="value">：{{ user.UserName }}</div>
            </div>
            <div class="item">
              <div class="label">账 号</div>
              <div class="value">：{{ user.UserAccount }}</div>
            </div>
            <div class="item">
              <div class="label">手机号</div>
              <div class="value">：{{ user.PhoneNumber }}</div>
            </div>
            <div class="item">
              <div class="label">Email</div>
              <div class="value">：{{ user.Email }}</div>
            </div>
            <div class="item">
              <div class="label">用户类型</div>
              <div class="value">：{{ user.RoleName }}</div>
            </div>
            <div class="item" v-if="DepartmentId">
              <div class="label">科 室</div>
              <div class="value">：{{ user.name }}</div>
            </div>
            <div class="item">
              <div class="label">个人签名</div>
              <div class="value">
                ：{{ user.Signature || "暂 时 没 有 哦~" }}
              </div>
            </div>
            <!-- <div class="leftbtns">
              <el-button type="primary" @click="mode = 'edit'">编辑</el-button>
            </div> -->
          </div>
        </template>
        <template v-else>
          <el-form
            :model="UserForm"
            ref="form"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="姓 名" prop="UserName">
              <el-input v-model="UserForm.UserName"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="PhoneNumber">
              <el-input
                v-model="UserForm.PhoneNumber"
                maxlength="11"
              ></el-input>
            </el-form-item>

            <el-form-item label="Email" prop="Email">
              <el-input v-model="UserForm.Email"></el-input>
            </el-form-item>

            <el-form-item label="个人签名" prop="Signature">
              <el-input v-model="UserForm.Signature" type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div class="btns">
            <el-button type="primary" @click="submit(form)">确定</el-button>
            <el-button type="danger" @click="mode = 'view'">取消</el-button>
          </div>
        </template>
      </div>
      <div class="right">
        <div class="avatarBox">
          <div class="avatar">
            <!-- <img src="@/assets/pics/avatar.png" alt="" /> -->
            <img
              :src="
                user.headerurl
                  ? baseApi + user.headerurl
                  : baseApi + 'UserHeader\\20230214105739655.jpg'
              "
              alt=""
            />
          </div>
          <!-- <div class="btns">
            <el-upload
              action=""
              ref="upload"
              class="upload-demo"
              :limit="1"
              :file-list="uploadFileList.list"
              accept=".png,.jpg,.jpeg,.bmp"
              :show-file-list="false"
              :http-request="uploadFile"
            >
              <el-button type="success">上传头像</el-button>
            </el-upload>
          </div> -->
        </div>
      </div>
    </div>
    <myLoading v-if="loading" />
  </div>
</template>

<script>
import {
  computed,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  toRefs,
  getCurrentInstance,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { storeUser } from "@/store/user";
import { storeToRefs } from "pinia";
import * as UserApi from "@/api/user";
import * as LoginApi from "@/api/login";
import { ElNotification } from "element-plus";
import Avatar from '@/assets/pics/avatar.png'
import HomeTitle from "@/components/title.vue";
export default {
  name: "",
  components: {
    HomeTitle,
  },
  setup(props, ctx) {
    const { proxy } = getCurrentInstance();
    const user = storeUser();
    const loading = ref(false);
    const mode = ref("view");
    const UserForm = reactive({
      Signature: user.Signature,
      UserName: user.UserName,
      PhoneNumber: user.PhoneNumber,
      Email: user.Email,
    });
    const form = ref("");
    const uploadFileList = reactive({list:[]});
    const uploadRef = ref("");
    const rules = {
      UserName: [
        { required: true, message: "用户名不能为空！", trigger: "blur" },
      ],
      Email: [{ required: true, message: "Email不能为空！", trigger: "blur" }],
      PhoneNumber: [
        { required: true, message: "手机号码不能为空！", trigger: "blur" },
      ],
    };
    // const computedUser = computed(() => {
    //   return user;
    // });
    const formLoading = ref(false);
    const uploadFile = async (v) => {
      let { data: res } = await UserApi.saveAvatar(
        {
          UserId: user.UserId,
        },
        [v.file]
      );
      if (res.Status != 0) {
        ElNotification({
          type: "error",
          title: "上传失败",
          message: "图片格式错误！，请转换格式后重试",
        });
        return;
      }
      uploadFileList.list = []
      let token = localStorage.getItem("token");
      if (token) {
        let { data } = await LoginApi.getUserInfo({ UserToken: token });
        if (data.Status == 0) {
          user.setUser(data.UserData);
        }
      }
    };

    const submit = (formEl) => {
      if (!formEl) return;
      formEl.validate(async (v) => {
        if (v) {
          formLoading.value = true;
          let { data } = await UserApi.save({
            UserId: user.UserId,
            UserName: UserForm.UserName,
            PhoneNumber: UserForm.PhoneNumber,
            Email: UserForm.Email,
            Signature: UserForm.Signature || "没 有 自 我 介 绍 呢",
          });
          if (data.Status == 0) {
            mode.value = "view";
            ElNotification({
              type: "success",
              title: "修改成功",
              message: "修改成功！",
            });
            let token = await localStorage.getItem("token");
            let { data: res } = await LoginApi.getUserInfo({
              UserToken: token,
            });
            if (res.Status == 0) {
              user.setUser(res.UserData);
            }
          } else {
            ElNotification({
              type: "error",
              title: "修改失败",
              message: "修改失败！",
            });
          }
          formLoading.value = false;
        }
        formLoading.value = false;
      });
    };
    return {
      loading,
      mode,
      UserForm,
      form,
      rules,
      submit,
      user,
      uploadFile,
      uploadRef,
      Avatar,
      uploadFileList,
    };
  },
};
</script>

<style scoped lang="scss">
::v-deep(.el-form-item__label) {
  color: #fff !important;
}
::v-deep(.el-textarea__inner) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-input__wrapper) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-input__inner) {
  // background: transparent !important;
  color: #fff !important;
}
#home {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: 30px;
  overflow-y: auto;
  background: var(--box-bg-color);

  .home-main {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    display: flex;
    > div {
      flex: 1;
      height: 100%;
    }
    .left {
      margin-right: 20px;
      .viewBox {
        padding: 40px 100px;
        .item {
          display: flex;
          font-size: 18px;
          color: #d0d4df;
          margin-bottom: 20px;
          // margin: 0 auto 20px;;
          .label {
            width: 100px;
            // text-align: center;
          }
          .value {
            flex: 1;
          }
        }
      }
      .btns {
        text-align: center;
      }
    }
    .right {
      .avatarBox {
        width: 300px;
        .avatar {
          height: 300px;
          img {
            width: 100%;
            object-fit: cover;
            border-radius: 50%;
          }
        }
        .btns {
          margin: 20px 0;
          text-align: center;
        }
      }
    }
  }
}
</style>
